<template>
    <div>
        {{ count }}
        <button @click="increment">increment</button>
    </div>
</template>

<script setup>
/**
 * ref 函数
    * 作用：定义响应式数据，不限类型
    * 使用：
        * 1、从 vue 中导入 ref 函数
        * 2、使用ref函数声明响应式数据，ref() 接收参数，将其包裹在一个带有 value 属性的 ref 对象中返回
    * 注意：
        * 1、在 script 中使用 ref 声明的响应式数据，需要添加 .value
        * 2、在 template 中使用，不需要添加
 */

// 从vue中导入ref函数
import { ref } from 'vue'
// 声明响应式数据
let count = ref(1)
// 定义 increment 方法
const increment = () => {
    count.value++
}
</script>

<style lang="scss" scoped></style>